{extend name="public/base" /}
{block name="title"}系统设置{/block}
{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/switchery/switchery.css" rel="stylesheet">
{/block}

{block name="main"}
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    {volist name="tabs" id="vo"}
                    <li class="{if $vo.tab===$tab}active{/if}"><a href="{:url('System/index')}?tab={$vo.tab}" aria-expanded="true">{$vo.name}</a></li>
                    {/volist}

                </ul>
                <div class="tab-content">
                    <div id="tab-{$tab}" class="tab-pane active">
                        <div class="panel-body">

                            <div class="col-12">

                                <form class="form-horizontal ajax-form" action="{:url('System/index')}" method="post">
                                    {volist name="configs" id="config"}
                                    <div class="form-group">
                                        <label class="col-lg-2 col-md-3 control-label">{$config.name}</label>
                                        <div class="col-lg-6 col-md-9">
                                            {switch $config.value_type}
                                            {case string}<input type="text" name="{$config.name}" placeholder="{$config.remark}" class="form-control" autocomplete="off" value="{$config.value}">{/case}
                                            {case bool}<input type="checkbox" class="ajax-switch" name="{$config.name}" {if $config.value === 'true'} checked {/if}>{/case}
                                            {case number}<input type="number" name="{$config.name}" placeholder="{$config.remark}" class="form-control" autocomplete="off" value="{$config.value}">{/case}
                                            {case text}<textarea class="form-control" name="{$config.name}" rows="5" placeholder="">{$config.value}</textarea>{/case}
                                            {case muti_text}<textarea class="form-control" name="{$config.name}" rows="5" placeholder="">{$config.value}</textarea>{/case}
                                            {default/}<input type="text" name="{$config.name}" placeholder="{$config.remark}" class="form-control" autocomplete="off" value="{$config.value}">
                                            {/switch}
                                            <span class="help-block m-b-none">{$config.remark}</span>
                                        </div>
                                    </div>
                                    {/volist}

                                    {if count($configs) > 0}
                                    <div class="form-group">
                                        <div class="col-lg-offset-2 col-lg-10">
                                            <button class="btn btn-success" type="submit">提交</button>
                                        </div>
                                    </div>
                                    {/if}
                                </form>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<!-- Switchery -->
<script src="__PUBLIC__/static/inspinia/js/plugins/switchery/switchery.js"></script>
<script>
  function changeConfig(name, value) {
      var url = "{:url(request()->controller() . '/index')}" + "?" + name + "=" + value;

      $.get(url, function(data) {
          if (data.code) {
              layer.msg(data.msg);
          } else {
              layer.msg(data.msg, function(){});
          }
      });
  }

  $(document).ready(function() {
      var elems = document.querySelectorAll('.ajax-switch');
      for (var i = 0; i < elems.length; i++) {
          var checkbox = elems[i];
          var switchery = new Switchery(checkbox, { color: '#1AB394' });
          checkbox.onchange = function() {
              changeConfig(this.name, this.checked);
          }
      }
  })

</script>

{/block}